<template>
  <!-- 关联数据集组件 -->
  <div class="dataset-component">
    <el-input v-model="input2">
      <template #append>
        <span @click="handleOpenDatasetDialog"> ...</span>
      </template>
    </el-input>
    <bi-dialog
      v-model:isShow="datasetDialog"
      :title="'关联数据集'"
      :close-on-click-modal="false"
      :handlerSubmit="handleCheckConfirm"
    >
      <!-- @selection-change="handleSelectionChange" -->

      <el-table
        :data="dataSetList"
        highlight-current-row
        @current-change="handleCurrentChange"
        style="width: 100%"
        header-row-class-name="table-header-gray"
        height="calc(100vh - 4.4rem)"
      >
        <!-- <el-table-column type="selection" width="55" /> -->
        <el-table-column property="dataSetName" label="数据集名称" />
        <el-table-column property="createTime" label="创建时间" />
      </el-table>
    </bi-dialog>
  </div>
</template>

<script setup>
import { reactive, ref, toRefs } from 'vue';
import { cloneDeep } from 'lodash';
import { getScreenHaveConfigDataSetListApi } from '@/views/design-center/api/data-set';
import { useRoute } from 'vue-router';

const route = useRoute();

const emit = defineEmits(['update-form-data']);

const props = defineProps({
  associatedDatasets: {
    type: Object,
    default: () => {}
  }
});

const input2 = ref('');
const datasetDialog = ref(false);
const dataSetList = ref([]);
// const multipleSelection = ref([]);
const currentRow = ref();

const handleOpenDatasetDialog = () => {
  datasetDialog.value = true;
};
const handleCurrentChange = (val) => {
  currentRow.value = val;
};

/**
 * @description: 获取配置好的数据集
 * @return {*}
 */
const getScreenHaveConfigDataSetList = async () => {
  let res = await getScreenHaveConfigDataSetListApi({
    reportId: route.query.id
  });
  dataSetList.value = res.data;
};

// getScreenHaveConfigDataSetList();
// const handleSelectionChange = (val) => {
//     // 只允许单选
//     if (val.length > 1) {
//         ElMessage({
//             message: '只允许单选',
//             type: 'warning'
//         });
//         return false;
//     }
//     // multipleSelection.value = val;
// };

// eslint-disable-next-line vue/no-setup-props-destructure
input2.value = props.associatedDatasets?.dataSetName || '';

const handleCheckConfirm = () => {
  datasetDialog.value = false;
  input2.value = currentRow.value.dataSetName;

  let copyValue = cloneDeep(currentRow.value);
  // delete copyValue['dataSetName'];
  delete copyValue['time'];
  emit('update-form-data', 'associatedDatasets', copyValue);

  console.log(
    '选中的数据集-----------',
    'associatedDatasets',
    currentRow.value
  );
};
</script>
<style lang="scss">
@import "@/assets/styles/index.scss";
.table-header-gray {
  // @include tableHeader;
}
</style>
<style scoped lang="scss">
@import "@/assets/styles/index.scss";
</style>
